import { computed, defineComponent, ref } from 'vue';
import AdditionalButtons from './AdditionalButtons.vue';
import Basic from './Basic.vue';
import Color from './Color.vue';
import CustomLocale from './CustomLocale.vue';
import Dark from './Dark.vue';
import DisableReadonly from './DisableReadonly.vue';
import Format24h from './Format24h.vue';
import Input from './Input.vue';
import InputFull from './InputFull.vue';
import Landscape from './Landscape.vue';
import MaskDateTime from './MaskDateTime.vue';
import MaskEscape from './MaskEscape.vue';
import MaskSimple from './MaskSimple.vue';
import NativeForm from './NativeForm.vue';
import NowBtn from './NowBtn.vue';
import Options from './Options.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>AdditionalButtons</h5>
            <AdditionalButtons />
          </div>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>Color</h5>
            <Color />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomLocale</h5>
            <CustomLocale />
          </div>
          <div class='block-'>
            <h5 class='title'>Dark</h5>
            <Dark />
          </div>
          <div class='block-'>
            <h5 class='title'>DisableReadonly</h5>
            <DisableReadonly />
          </div>
          <div class='block-'>
            <h5 class='title'>Format24h</h5>
            <Format24h />
          </div>
          <div class='block-'>
            <h5 class='title'>Input</h5>
            <Input />
          </div>
          <div class='block-'>
            <h5 class='title'>InputFull</h5>
            <InputFull />
          </div>
          <div class='block-'>
            <h5 class='title'>Landscape</h5>
            <Landscape />
          </div>
          <div class='block-'>
            <h5 class='title'>MaskDateTime</h5>
            <MaskDateTime />
          </div>
          <div class='block-'>
            <h5 class='title'>MaskEscape</h5>
            <MaskEscape />
          </div>
          <div class='block-'>
            <h5 class='title'>MaskSimple</h5>
            <MaskSimple />
          </div>
          <div class='block-'>
            <h5 class='title'>NativeForm</h5>
            <NativeForm />
          </div>
          <div class='block-'>
            <h5 class='title'>NowBtn</h5>
            <NowBtn />
          </div>
          <div class='block-'>
            <h5 class='title'>Options</h5>
            <Options />
          </div>
        </div>
      );
    };
  },
});
